Some special lessons learnt recently from my day job

I was adding a nice and fancy feature to a plain old table via React. I was excited as the UI looked good and I wanted to test some lessons learnt from reading academic materials of React.

I stumbled across 3 unique lessons to take away from my experience, unique enough that I need to jot them down.

Without any further ado, here they are:

1. How would you uniquely filter an array of objects?

Consider the following list of date objects:

const dates = [
    {year: 2020, month: 1},
    {year: 2021, month: 12},
    {year: 2022, month: 5},
    {year: 2020, month: 1}
]

I will stop there but the data can grow from there, and the props of each object is not limited to those 2 properties.

What did I do? I tried using Set, as my understanding was that it will take anything and return the unique parts of it.

What happened? It didn’t work!

Why? It is the old case of references vs value types. Set only compares by reference when it comes to objects. For non-object types, it compares values.

How did I resolve it? I used Map for the first time in my developer career.

2. User intentions in UI

I like to enhance whatever I am building whenever I see an opportunity. However, sometimes I err regarding it. It costs time primarily and likely to introduce scope creep.

I recently implemented a scroll-based feature that enhanced a feature I was building in the spirit of trying to be as helpful as possible. That introduced a unique issue of transition lag. I spoke to senior engineers and learnt to consider intentions of the user. The result was that listening on scroll was unnecessary as it was a change of intention from interacting with our feature.

That could’ve saved me a lot of time! I need to consider intentions more in my processes.

3. Not always flex

I tend to reach for flex whenever I need something flexible that can wrap, be divided equally etc. This time I had a container inside a modal. I set flex-basis for children to 50% each. What happened? The more items I added, the more the container width grew until it reached the window’s boundaries.

Two things learnt:

A strange edge case behaviour of flex - possibly because it was absolutely positioned, it couldn’t find a parent with fixed width until window (root of dom)
That I should consider grid more often